<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>第一个Vue程序</title>
  </head>
  <body>
    <div id="app">{{ message + message}}
      <div :id="message"></div>
      <!-- v-if ,v-else指令 -->
      <ul>
        <li>
          <span v-if="!item.del" >{{item.title}}</span>
          <span v-else style="text-decoration: line-through">
          {{ item.title }}
          </span>
          <button v-show="!item.del">删除</button>
        </li>
      </ul>
      <!-- v-for 指令-->
      <ul>
        <li v-for="item in list">
          <span v-if="!item.del">{{ item.title }}</span>
          <span v-else style="text-decoration:line-through lightcoral">{{item.title}}</span>
          <button v-show="!item.del">删除</button>
        </li>
      </ul>
    </div>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el : '#app',
        data : {
          message : 'hello world !!',
          item : {
            title : '课程1',
            del : true
          },
          list:[{
            title : "课程1",
            del : false
          },{
            title: "课程2",
            del : true
          }]
        }
      })
    </script>
  </body>
</html>
